<script setup>
import { reactive, ref, onMounted, onUnmounted, nextTick } from 'vue';
import { ElMessage } from 'element-plus';
import { getMenuParams, getLastdata } from '@T2/utils/params.ts';
import { useCurrentWatchStore } from '@T2/store/users.ts';
import { useRoute } from 'vue-router';
import Charts1 from '../components/charts1.vue';

const route = useRoute();
const currentWatchStore = useCurrentWatchStore();
const { curProject } = currentWatchStore;

const Rt = reactive({
  group1: null,
  group2: null,
  group3: null,
  group4: null,
});
const group3_dex = ref(0), group4_dex = ref(0);
onMounted(async() => {
  const { sensors } = getMenuParams(route.path);
  
  if (!sensors?.length) {
    ElMessage.error('未配置参数！');
    return;
  }
  const { curIds, diffIds } = await getLastdata(sensors);
  const [ group1, group2, group3, group4 ] = sensors;
  Rt.group1 = group1;
  Rt.group2 = group2;
  Rt.group3 = group3;
  Rt.group4 = group4;
});
</script>

<template>
  <div class="top-row flex--center">
    <div class="box data-box">
      <div class="title">运行天数</div>
      <div class="num">{{ curProject.run_days }}</div>
    </div>
    <div class="box group-1" v-if="Rt.group1">
      <div class="title">{{ Rt.group1.n }}</div>
      <div class="flex" v-if="Rt.group1?.c?.length">
        <div class="group-1-item" v-for="item in Rt.group1.c">
          <div class="num">
            {{ Number(item.value) ? Number(item.value)?.toFixed(2) : item.value }}
            <span>{{ item.unit }}</span>
          </div>
          <div class="name">{{ item.n }}</div>
        </div>
      </div>
    </div>
    <div class="box group-2" v-if="Rt.group2">
      <div class="title">{{ Rt.group2.n }}</div>
      <template v-if="Rt.group2?.c?.length">
        <div class="data-title-col flex--center">
          <span></span>
          <span v-for="item in Rt.group2.c">{{ item.n }}</span>
        </div>
        <div class="data-data-col flex--center" v-if="Rt.group2.c[0].c?.length">
          <span>{{ Rt.group2.c[0].c[0].n }}</span>
          <span v-for="g2c in Rt.group2.c">{{ g2c.c[0].value }}</span>
        </div>
        <div class="data-data-col flex--center" v-if="Rt.group2.c[0].c?.length > 1">
          <span>{{ Rt.group2.c[0].c[1].n }}</span>
          <span v-for="g2c in Rt.group2.c">{{ g2c.c[1].value }}</span>
        </div>
      </template>
      
    </div>
  </div>
  
  <div class="box group-3 flex-column" v-if="Rt.group3">
    <div class="title">{{ Rt.group3.n }}</div>
    <el-select class="select" v-model="group3_dex" v-if="Rt.group3.c?.length > 1">
      <el-option
        v-for="(item, index) in Rt.group3.c"
        :key="index"
        :value="index"
        :label="item.n"
      />
    </el-select>
    <div style="flex: 1;overflow: hidden;">
      <Charts1
        :params="Rt.group3.c[group3_dex].c"
        :currentDex="group3_dex"
        v-if="Rt.group3.c[group3_dex].c?.length"
      />
    </div>
  </div>
  
  <div class="box group-4 flex-column" v-if="Rt.group4">
    <div class="title">{{ Rt.group4.n }}</div>
    <el-select class="select" v-model="group4_dex" v-if="Rt.group4.c?.length > 1">
      <el-option
        v-for="(item, index) in Rt.group4.c"
        :key="index"
        :value="index"
        :label="item.n"
      />
    </el-select>
    <div style="flex: 1;overflow: hidden;">
      <Charts1
        :params="Rt.group4.c[group4_dex].c"
        :currentDex="group4_dex"
        v-if="Rt.group4.c[group4_dex].c?.length"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.top-row {
  position: absolute;
  right: 20px;
  top: 30px;
  width: calc(100% - 40px);
}
.box {
  height: 140px;
  background: rgba(0, 18, 24, .7);
  box-shadow: inset 0 0 20px #0ff6;
  border: 1px solid #00829E;
  margin-right: 20px;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  overflow: hidden;
  .title {
    height: 25px;
    line-height: 25px;
    font-size: 16px;
    font-weight: 500;
    color: #0ff;
    padding-left: 20px;
    margin-top: 20px;
  }
  .num {
    height: 35px;
    line-height: 35px;
    font-size: 21px;
    font-weight: 500;
    color: #fff;
    text-align: center;
    margin-top: 8px;
    span {
      font-size: 14px;
    }
  }
  .name {
    height: 20px;
    font-size: 14px;
    color: #008ead;
    line-height: 20px;
    margin-top: 8px;
  }
}
.data-box {
  width: 240px;
}
.group-1 {
  flex: inherit;
  padding: 0 25px;
  .group-1-item {
    width: 100%;
    margin: 0 20px;
    text-align: center;
    white-space: nowrap;
  }
}
.group-2 {
  flex: 3;
  .data-title-col {
    position: absolute;
    top: 30px;
    right: 0;
    width: 100%;
    height: 20px;
    line-height: 20px;
    span {
      flex: 1;
      font-size: 14px;
      color: #008ead;
      text-align: center;
    }
  }
  .data-data-col {
    height: 35px;
    line-height: 35px;
    margin-top: 8px;
    span {
      flex: 1;
      font-size: 20px;
      font-weight: 500;
      color: #fff;
      line-height: 28px;
      margin-top: 6px;
      text-align: center;
      &:nth-child(1) {
        font-size: 14px;
        color: #008ead;
      }
    }
  }
}

.group-3 {
  position: absolute;
  right: 20px;
  top: calc(30px + 140px + 20px);
  width: 500px;
  height: 280px;
  .select {
    position: absolute;
    right: 20px;
    top: 10px;
    width: 100px;
  }
}
.group-4 {
  position: absolute;
  right: 20px;
  top: calc(30px + 140px + 20px + 280px + 20px);
  width: 500px;
  height: 280px;
  .select {
    position: absolute;
    right: 20px;
    top: 10px;
    width: 100px;
  }
}
</style>
<style scoped>
:deep(.el-select__wrapper) {
  background-color: transparent;
  box-shadow: none;
  border: 1px solid rgba(8, 157, 132, 1);
}
:deep(.el-select__placeholder) {
  color: #00829e;
}
</style>